<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello vue</title>
<style type="text/css">

	#btn{
		margin:50px;
		position: absolute;
	}
	.qiu{
		width: 20px;
		height: 20px;
		background: red;
		border-radius: 50%;
		position: relative;
		top:66px;
		left: 80px;
	}
</style>
</head>
<body>




<div id="app">

	<button id="btn" @click="flag=!flag">小球动画</button>

	<transition
			  @before-enter="beforeEnter" 
		      @enter="enter"
		      @after-enter="afterEnter"
			>
		<div class="qiu" v-show="flag"></div>
  </transition>

  
</div>









<br>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script type="text/javascript">

var  vm= new Vue({
  el: '#app',

  data: {
  	flag:false
  	 
  },

  methods:{
  	beforeEnter(el){
  		el.style.transform = 'translate(0,0)'
  	},
  	enter(el,done){
  		el.offsetWidth //必须调用
          el.style.transform = 'translate(120px,240px)'
          el.style.transition = 'all 2s ease'
          el.style.opacity = 0.8
          done()
  	},
  	afterEnter(el){
  		this.flag = false
  	}




  }

})





</script>

	
</body>
</html>